<script lang="ts" setup>
import { getOrderListApi } from '@/services/goods'
import { useMemberStore, useOrderStore, useLocationStore } from '@/stores'
import goodsBox from './goodsBox.vue'
import { ref, watch } from 'vue'

const props = defineProps<{
  tabIndex: number
  currentIndex: number
}>()
const locationStore = useLocationStore()
const memberStore = useMemberStore()
const orderStore = useOrderStore()
const list = ref<any>([])
const pagingRef = ref<any>(null)
const goodsBoxRef = ref()

/**
 * * 获取list 的方法
 */
const queryListFn = async (pageNo: number, pageSize: number) => {
  const getArg = {
    latitude: locationStore.location!.latitude,
    longitude: locationStore.location!.longitude,
    status: orderStore.orderStatus,
    userId: memberStore.userInfo!.id,
    pageNum: pageNo,
    pageSize,
  }
  const res = await getOrderListApi(getArg)
  pagingRef.value.complete(res.data.rows)
}

// 监听父组件传过来的 tab currentIndex值
watch(
  () => props.currentIndex,
  (newVal) => {
    // 判断是否切换tab栏，
    if (newVal == props.tabIndex) {
      setTimeout(() => {
        pagingRef.value.reload() // 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果
      }, 5) // 加5毫秒延迟，不然会出现 reload 为null
    }
  },
)

const emits = defineEmits(['openLogin'])
const isTriggered = ref(false)
const refresherStatusChange = (e: number) => {
  e === 2 ? (isTriggered.value = true) : (isTriggered.value = false)
}
/** 获取列表数据 */
const getList = () => {
  setTimeout(() => {
    pagingRef.value.refresh()
  }, 5)
  goodsBoxRef.value?.forEach((item: any) => {
    item?.changeDataFn() // 关闭多选
  })
}

defineExpose({
  getList,
})
</script>

<template>
  <view class="center">
    <z-paging
      ref="pagingRef"
      v-model="list"
      v-show="memberStore.userInfo && list.length"
      @refresherStatusChange="refresherStatusChange"
      @query="queryListFn"
      bg-color="#f5f5f5"
      loading-more-no-more-text="没有更多订单了"
      :paging-style="{ height: '100%' }"
      :auto="false"
    >
      <view class="scrollViewBox">
        <goodsBox
          ref="goodsBoxRef"
          :isTriggered="isTriggered"
          v-for="goods in list"
          :key="goods.orderId"
          :spotBox="goods"
        />
      </view>
    </z-paging>
    <view v-show="memberStore.userInfo && !list.length" class="bgc">
      <image class="_img" src="/static/images/MYgoods.svg" mode="aspectFit" />
      <view class="text">您还没有订单记录哦~</view>
      <navigator
        url="/pages/eat/eat"
        class="goToOrder"
        open-type="switchTab"
        hover-class="view-hover"
        >去下单</navigator
      >
    </view>
    <view v-show="!memberStore.userInfo" class="bgc">
      <image class="_img" src="/static/images/MYgoods.svg" mode="aspectFit" />
      <view class="text">您还未登录哦~</view>
      <view class="text">请登录后查看您的订单信息</view>
      <view class="goToOrder" hover-class="view-hover" @tap="emits('openLogin')">立即登陆</view>
    </view>
  </view>
</template>

<style lang="scss">
.center {
  width: 100%;
  height: 100%;
  text-align: center;
}

.scrollViewBox {
  padding: 24rpx 24rpx;
  background: #f5f5f5;
  .bottom_out {
    text-align: center;
    color: #00000080;
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100px));
  }
}
.bgc {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  ._img {
    width: 376rpx;
    height: 334rpx;
  }
  .text {
    font-size: 28rpx;
    color: #00000080;
  }
  .goToOrder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    width: 280rpx;
    height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    background-color: $uni-color-motif;
    border-radius: 44rpx;
  }
}
</style>
